<template>
	<view>
		<view class="page-foot bgf">
			<view class="footbox">
				<view v-if="house_info&&house_info.default_broker" class="flex-box flex-between foot1">
					<view class="flex-box">
						<image :src="house_info.default_broker.user.avatar" class="footavatar" mode="aspectFill">
						</image>
						<view>
							<view class="name">{{ house_info.default_broker.user.nickname }}</view>
							<view class="fs24 col8">服务<text
									class="orange">{{ house_info.default_broker.profile.service_num }}</text>人</view>
						</view>
					</view>
					<view class="flex-box">
						<view @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</view>
						<!-- <view @tap="jumpToChat" :data-uid="house_info.default_broker.user.id" class="btn2">立即微聊</view> -->
						<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
				<view v-else class="foot2 flex-box flex-between">
					<view class="flex-box">
						<view @tap="bindPhoneCall"
							:data-tel="house_info.cosult_tel ? house_info.cosult_tel : house_info.platform_contact_tel"
							class="tc conbtn1">
							<image src="/static/icon/icon_tel2.png" class="icon_tel2"></image>
							<view class="fs24">咨询热线</view>
						</view>
						<navigator url="/pages/home/help_you/help_you" class="tc conbtn2">
							<image src="/static/icon/icon_search-b.png" class="icon_search"></image>
							<view class="fs24">帮我找房</view>
						</navigator>
					</view>
					<view class="flex-box">
						<view @tap="addAppointLog" data-type="2" data-subtype="0" class="btn1">留电咨询</view>
						<!-- <view @tap="jumpToChat" class="btn2">立即微聊</view> -->
						<button open-type="contact" class="btn2">立即微聊</button>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="flex-box nav flex-between">
				<view :class="'navitem ' + (nav == 1 ? 'active' : '')" data-navindex="1" @tap="choosenav">楼盘动态</view>
				<view :class="'navitem ' + (nav == 2 ? 'active' : '')" data-navindex="2" @tap="choosenav">开盘信息</view>
				<view :class="'navitem ' + (nav == 3 ? 'active' : '')" data-navindex="3" @tap="choosenav">交房信息</view>
				<view :class="'navitem ' + (nav == 4 ? 'active' : '')" data-navindex="4" @tap="choosenav">证件信息</view>
			</view>
			<view class="dynamiclist">
				<template v-if="trendsList.total > 0">
					<template v-for="(item, index) in trendsList.data">
						<view class="dynamicitem" v-if="nav == 1">
							<view class="title">
								<view class="col89">{{ item.createtime_text }}</view>
							</view>
							<view class="dyna1">{{ item.name }}</view>
							<view class="dyna2">{{ item.content }}</view>
						</view>
						<view class="dynamicitem" v-if="nav == 2">
							<view class="title">
								<view class="col89">{{ item.show_date }}</view>
							</view>
							<view class="dyna1">{{ item.name }}</view>
							<view class="dyna2">{{ item.content }}</view>
						</view>
						<view class="dynamicitem" v-if="nav == 3">
							<view class="title">
								<view class="col89">{{ item.show_date }}</view>
							</view>
					 	<view class="dyna1">{{ item.name }}</view>
							<view class="dyna2">{{ item.content }}</view>
						</view>
						<view class="dynamicitem" v-if="nav == 4">
							<view class="title">
								<view class="col89">{{ item.show_date }}</view>
							</view>
							<view class="dyna1">{{ item.name }}</view>
							<view class="dyna2">{{ item.content }}</view>
							<view class="flex-box flex-wrap">
								<image @tap="previewImg" :data-url="item" :lazy-load="true" :src="item" class="dynaimg"
									v-for="(item, index1) in item.images_arr"></image>
							</view>
						</view>
					</template>
					<u-loadmore v-if="trendsList.total > 9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"  nomore-text="没有更多了" />
				</template>
				<template v-else>
					<u-empty
					        mode="data"
							text="暂无数据"
							textSize="24"
					        icon="/static/images/none-data.png"
					>
					</u-empty>
				</template>
			</view>
		</view>
		<!-- 预约弹窗start -->
		<u-popup :show="popupStatus" mode="center" round="8" @close="closePopupStatus" closeOnClickOverlay>
			<view class="zixun-pop">
				<template v-if="appoint_type == 1 && appoint_subscribe_type == 2">
					<view class="fs40 black tc mb20">订阅楼盘开盘通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>楼盘总是悄无声息的开盘？</view>
						<view>一键订阅，让您抢占买房先机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 1">
					<view class="fs40 black tc mb20">订阅价格变动通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 1 && appoint_subscribe_type == 3">
					<view class="fs40 black tc mb20">订阅实时动态通知</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>价格变动这么快？订阅价格变动通知</view>
						<view>涨价降价我们将第一时间通知您，帮您找准买房时机！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 3 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">免费专车看房</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>公交太累，打车太贵，看房团还要等位</view>
						<view>佳和房产带您免费专车看房，省时，省力，还包来回！</view>
					</view>
				</template>
				<template v-else-if="appoint_type == 2 && appoint_subscribe_type == 0">
					<view class="fs40 black tc mb20">我要咨询</view>
					<view class="fs30 col-darkGray tc mb40">
						<view>该项目有哪些优劣势？性价比如何？</view>
						<view>还有什么类似楼盘推荐……</view>
						<view>更多问题，咨询师帮你答疑解惑</view>
					</view>
				</template>
				<view class="input-box flex-box plr30 mb40" v-if="popupStatus"><input @input="appoint_mobileFun"
						:value="appoint_mobile" class="input flex-grow-1" type="number" placeholder="请输入手机号码"
						placeholder-style="color:#ccc;" /></view>
				<view @tap="submitAppointLog" class="btn1 mb30">确认</view>
				<!-- <view @tap="jumpToChat" :data-uid="broker_user_id" class="btn2 mb20">立即微聊</view> -->
				<button open-type="contact" class="btn2 mb20">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约弹窗end -->
		<!-- 预约成功弹窗start -->
		<u-popup :show="reserveStatus" mode="center" closeable :safeAreaInsetBottom="false" @close="closeReserveStatus">
			<view class="reserve">
				<image src="/static/icon/icon_reserve.png" class="icon_reserve"></image>
				<view class="title1">预约成功</view>
				<view class="title2">用手机号码{{ appoint_mobile_text }}预约了咨询服务，稍后经纪人将为您解答疑问，请注意接听电话</view>
				<button @tap="closeReserveStatus" class="reserve-btn1">好的</button>
				<!-- <button @tap="jumpToChat" :data-uid="broker_user_id" class="reserve-btn2">立即微聊</button> -->
				<button open-type="contact" class="reserve-btn2">立即微聊</button>
			</view>
		</u-popup>
		<!-- 预约成功弹窗end -->
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				loadStatus:'loadmore',
				
				popupStatus: false,

				//订阅咨询预约弹窗
				reserveStatus: false,

				//预约成功弹窗
				// 预约订阅类型
				appoint_type: 1,

				//分类:1=订阅动态,2=留电咨询,3=领取免费专车,4=帮你找房,5=咨询房价走势
				// 订阅分类
				appoint_subscribe_type: 0,

				//订阅通知类型:0=无订阅,1=订阅变价通知,2=订阅开盘通知,3=订阅实时动态
				// 预约手机号
				appoint_mobile: '',

				appoint_mobile_text: '',
				broker_user_id: 0,
				house_info: null,
				house_id: 0,

				// 动态列表
				trendsList: {
					total: 0,
					current_page: 0,
				 last_page: 1,
					data: []
				},

				all_img_arr: [],
				nav: 1,

			}
		},
		onLoad: function(options) {
			this.house_info = app.globalData.pagesParamHouseInfo;
			this.house_id = options.house_id || 0;
			this.initData();
		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载

			var that = this; //模拟加载

			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.trendsList.current_page >= this.trendsList.last_page) {
				this.loadStatus='nomore';
				return false;
			} else {
				this.getTrendsList();
			}
		},
		methods: {
			// 获取列表信息
			getTrendsList: function() {
				var that = this;
				var json = {
					house_id: that.house_id,
					type: this.nav
				};
				json.page = Number(that.trendsList.current_page) + 1;

				if (json.page > 1 && that.trendsList.current_page >= that.trendsList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus='nomore';
					return false;
				}
				this.loadStatus='loading';
				functions.getAjaxList(that, '/api/xiluhouse/House/trends_list', json, function(res) {
					var trendsList = res.data;

					if (json.page > 1) {
						var now_trendsList_data = that.trendsList.data || [];
						var now_trendsList_data = now_trendsList_data.concat(trendsList.data);
						trendsList.data = now_trendsList_data;
					}
					if(trendsList.current_page >= trendsList.last_page){
						that.loadStatus='nomore';
					}
					var now_data = trendsList.data;
					var all_img_arr = [];
					now_data.forEach((element) => {
						var images_arr = element.images_arr;
						images_arr.forEach((element2) => {
							all_img_arr.push(element2);
						});
					});
					that.all_img_arr=all_img_arr;
					that.trendsList=trendsList;
				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				that.trendsList.current_page=0
				that.getTrendsList();
			},
			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},

			// 切换类型
			choosenav(e) {
				this.nav = e.currentTarget.dataset.navindex;
				this.trendsList.current_page = 0;
				this.getTrendsList();
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;

				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				}

				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid, that.house_info.id);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			// 添加预约记录
			addAppointLog(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				
				if (!uid) {
					if (this.house_info.default_broker) {
						uid = this.house_info.default_broker.user_id;
					} else {
						uid = 0;
					}
				} 
				this.appoint_type= e.currentTarget.dataset.type;
				this.appoint_subscribe_type= e.currentTarget.dataset.subtype;
				this.broker_user_id= uid; 
				// 处理手机号码
				this.appoint_mobile= uni.getStorageSync('mobile') || this.appoint_mobile;
				this.popupStatus=true;
			},

			appoint_mobileFun(e) {
				this.appoint_mobile = e.detail.value
			},

			// 提交预约日志
			submitAppointLog() {
				var that = this;
				if (that.appoint_mobile.length != 11) {
					functions.toast('请输入正确的手机号');
					return false;
				}
				functions.checkLogin(function(ret) {
					if (ret) {
						var appoint_mobile = uni.getStorageSync('mobile');
						that.appoint_mobile = appoint_mobile;

						functions.submitAjaxData(
							that,
							'/api/xiluhouse/house/create_appoint_log', {
								type: that.appoint_type,
								subscribe_type: that.appoint_subscribe_type,
								mobile: that.appoint_mobile,
								broker_user_id: that.broker_user_id,
								house_id: that.house_info.id,
								prov: that.house_info.prov,
								city: that.house_info.city,
								region: that.house_info.region
							},
							function(res) {
								that.appoint_mobile = that.appoint_mobile;
								that.appoint_mobile_text = appoint_mobile.substr(0, 3) + '****' +
									appoint_mobile.substr(7);
								that.reserveStatus = true;
								that.popupStatus = false;
							}
						);
					} else {
						functions.toast('请先登录');
					}
				});
			},

			closePopupStatus() {
				this.popupStatus = false;
			},
			closeReserveStatus() {
				this.reserveStatus = false;
			},

			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f6f7fa;
	}

	.nav {
		padding: 30rpx 40rpx;
		background-color: #fff;
	}

	.nav .navitem {
		width: 140rpx;
		height: 55rpx;
		border-radius: 5rpx;
		background: #f6f7fa;
		line-height: 55rpx;
		text-align: center;
		color: #898989;
		font-size: 26rpx;
	}

	.nav .navitem.active {
		background-color: #0091ff;
		color: #fff;
	}


	.dynamiclist {
		padding: 0 40rpx 40rpx;
		background-color: #fff;
	}

	.dynamicitem {
		position: relative;
		padding: 36rpx 0 4rpx 30rpx;
	}

	.dynamicitem::after {
		content: '';
		display: block;
		height: 100%;
		width: 2rpx;
		background: #f4f3f3;
		position: absolute;
		left: 0;
		top: 50rpx;
		z-index: 1;
	}

	.dynamicitem .title {
		position: relative;
	}

	.dynamicitem .title::before {
		content: '';
		display: block;
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(180deg, #00C4FF, #0091FF);
		position: absolute;
		left: -38rpx;
		top: 16%;
		border-radius: 50%;
		z-index: 2;
	}

	.dynamicitem .new {
		background: #0091ff;
		width: 80rpx;
		height: 41rpx;
		border-radius: 10rpx 0 10rpx 0;
		line-height: 41rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.dynamicitem .dyna1 {
		padding: 22rpx 0 14rpx;
		font-size: 32rpx;
	}

	.dynamicitem .dyna2 {
		line-height: 43rpx;
		letter-spacing: 0.336rpx;
		color: #898989;
	}

	.dynamicitem .dynaimg {
		width: 200rpx;
		height: 140rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.dynamicitem:last-of-type::after {
		display: none;
	}

	.footbox button {
		font-weight: normal;
		padding: 0;
		margin: 0;
	}

	.footbox {
		background-color: #fff;
	}

	.footavatar {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
		margin-right: 15rpx;
	}

	.footbox .name {
		font-size: 32rpx;
		line-height: 43rpx;
	}

	.footbox .btn1 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
	}

	.footbox .btn2 {
		width: 190rpx;
		margin: 0;
		padding: 0;
		text-align: center;
		line-height: 74rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: normal;
		height: 74rpx;
		border-radius: 10rpx;
		background: #ff7b40;
		margin-left: 15rpx;
		box-shadow: 0px 4rpx 40rpx rgba(248, 103, 56, 0.3);
	}


	.footbox .icon_search {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.footbox .icon_tel2 {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.footbox .conbtn1 {
		width: 150rpx;
		border-right: 1px solid #f4f3f3;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .conbtn2 {
		width: 150rpx;
		font-size: 24rpx;
		color: #333;
	}

	.footbox .foot2 {
		height: 100rpx;
		background-color: #fff;
		padding-right: 40rpx;
	}

	.footbox .foot1 {
		height: 100rpx;
		background-color: #fff;
	}
</style>
